<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工具导航 - 在线工具集合</title>
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="header">
        <div class="container">
            <div class="header-content">
                <div class="logo">
                    <h1>🛠️ 工具导航</h1>
                    <p>专业的在线工具集合</p>
                </div>
                <div class="header-stats">
                    <span class="stat">
                        <strong>8</strong>
                        <span>工具</span>
                    </span>
                    <span class="stat">
                        <strong>100%</strong>
                        <span>免费</span>
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="main-content">
        <div class="container">
            <div class="search-bar">
                <input type="text" id="search-input" placeholder="搜索工具...">
                <span class="search-icon">🔍</span>
            </div>

            <div class="tools-grid" id="tools-grid">
                <!-- 已实现的工具 -->
                <div class="tool-card available" data-category="文本处理" data-keywords="json 格式化 美化 压缩 验证">
                    <div class="tool-header">
                    <div class="tool-icon">📝</div>
                        <h3>JSON 格式化工具</h3>
                    </div>
                    <div class="tool-info">
                        <p>JSON数据格式化、压缩、验证和转换</p>
                        <div class="tool-features">
                            <span class="feature">格式化</span>
                            <span class="feature">压缩</span>
                            <span class="feature">验证</span>
                        </div>
                    </div>
                    <div class="tool-status">
                        <span class="status-badge available">可用</span>
                        <a href="tools/json-formatter/json-formatter.html" class="tool-link">使用工具</a>
                    </div>
                </div>

                <div class="tool-card available" data-category="图表绘制" data-keywords="mermaid 流程图 图表 序列图 甘特图">
                    <div class="tool-header">
                    <div class="tool-icon">📊</div>
                        <h3>Mermaid 图表编辑器</h3>
                    </div>
                    <div class="tool-info">
                        <p>在线绘制流程图、序列图、甘特图等</p>
                        <div class="tool-features">
                            <span class="feature">实时预览</span>
                            <span class="feature">多种图表</span>
                            <span class="feature">导出</span>
                        </div>
                    </div>
                    <div class="tool-status">
                        <span class="status-badge available">可用</span>
                        <a href="tools/mermaid-editor/mermaid.html" class="tool-link">使用工具</a>
                    </div>
                </div>

                <div class="tool-card available" data-category="图片处理" data-keywords="图片压缩 图像优化 webp 大小">
                    <div class="tool-header">
                    <div class="tool-icon">🖼️</div>
                        <h3>图片压缩工具</h3>
                    </div>
                    <div class="tool-info">
                        <p>在线压缩图片，支持多种格式转换</p>
                        <div class="tool-features">
                            <span class="feature">高质量压缩</span>
                            <span class="feature">批量处理</span>
                            <span class="feature">格式转换</span>
                        </div>
                    </div>
                    <div class="tool-status">
                        <span class="status-badge available">可用</span>
                        <a href="tools/image-compressor/image-compressor.html" class="tool-link">使用工具</a>
                    </div>
                </div>

                <div class="tool-card available" data-category="图片处理" data-keywords="ocr 文字识别 图片转文字 扫描">
                    <div class="tool-header">
                    <div class="tool-icon">📷</div>
                        <h3>OCR 文字识别</h3>
                    </div>
                    <div class="tool-info">
                        <p>从图片中提取文字，支持多种语言</p>
                        <div class="tool-features">
                            <span class="feature">多语言</span>
                            <span class="feature">高精度</span>
                            <span class="feature">在线处理</span>
                        </div>
                    </div>
                    <div class="tool-status">
                        <span class="status-badge available">可用</span>
                        <a href="tools/ocr-scanner/ocr-scanner.html" class="tool-link">使用工具</a>
                    </div>
                </div>

                <!-- 待开发的工具 -->
                <div class="tool-card coming-soon" data-category="代码处理" data-keywords="代码格式化 html css javascript 美化">
                    <div class="tool-header">
                    <div class="tool-icon">💻</div>
                        <h3>代码格式化工具</h3>
                    </div>
                    <div class="tool-info">
                        <p>HTML、CSS、JavaScript代码格式化和美化</p>
                        <div class="tool-features">
                            <span class="feature">多语言支持</span>
                            <span class="feature">自定义配置</span>
                            <span class="feature">实时预览</span>
                        </div>
                    </div>
                    <div class="tool-status">
                        <span class="status-badge coming-soon">即将推出</span>
                        <button class="tool-link disabled">开发中</button>
                    </div>
                </div>

                <div class="tool-card coming-soon" data-category="实用工具" data-keywords="二维码 qr code 生成 扫描">
                    <div class="tool-header">
                    <div class="tool-icon">📱</div>
                        <h3>二维码生成器</h3>
                    </div>
                    <div class="tool-info">
                        <p>生成和解析二维码，支持多种数据类型</p>
                        <div class="tool-features">
                            <span class="feature">多种格式</span>
                            <span class="feature">自定义样式</span>
                            <span class="feature">批量生成</span>
                        </div>
                    </div>
                    <div class="tool-status">
                        <span class="status-badge coming-soon">即将推出</span>
                        <button class="tool-link disabled">开发中</button>
                    </div>
                </div>

                <div class="tool-card coming-soon" data-category="文本处理" data-keywords="正则表达式 regex 测试 匹配">
                    <div class="tool-header">
                    <div class="tool-icon">🔍</div>
                        <h3>正则表达式测试器</h3>
                    </div>
                    <div class="tool-info">
                        <p>实时测试和验证正则表达式匹配</p>
                        <div class="tool-features">
                            <span class="feature">实时测试</span>
                            <span class="feature">匹配高亮</span>
                            <span class="feature">常用模式</span>
                        </div>
                    </div>
                    <div class="tool-status">
                        <span class="status-badge coming-soon">即将推出</span>
                        <button class="tool-link disabled">开发中</button>
                    </div>
                </div>

                <div class="tool-card coming-soon" data-category="编码解码" data-keywords="base64 编码 解码 文本 图片">
                    <div class="tool-header">
                    <div class="tool-icon">🔐</div>
                        <h3>Base64 编解码</h3>
                    </div>
                    <div class="tool-info">
                        <p>Base64编码解码，支持文本和图片</p>
                        <div class="tool-features">
                            <span class="feature">文本编码</span>
                            <span class="feature">图片转换</span>
                            <span class="feature">批量处理</span>
                        </div>
                    </div>
                    <div class="tool-status">
                        <span class="status-badge coming-soon">即将推出</span>
                        <button class="tool-link disabled">开发中</button>
                    </div>
                </div>
            </div>

            <div class="categories">
                <h3>工具分类</h3>
                <div class="category-filters">
                    <button class="category-btn active" data-category="all">全部工具</button>
                    <button class="category-btn" data-category="文本处理">文本处理</button>
                    <button class="category-btn" data-category="图片处理">图片处理</button>
                    <button class="category-btn" data-category="图表绘制">图表绘制</button>
                    <button class="category-btn" data-category="代码处理">代码处理</button>
                    <button class="category-btn" data-category="实用工具">实用工具</button>
                    <button class="category-btn" data-category="编码解码">编码解码</button>
                </div>
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="container">
            <p>&copy; 2024 工具导航. 免费的在线工具集合</p>
            <div class="footer-links">
                <a href="#about">关于我们</a>
                <a href="#contact">联系我们</a>
                <a href="#feedback">意见反馈</a>
            </div>
        </div>
    </div>

    <script src="assets/js/main.js"></script>
</body>
</html> 